<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>贴花</title>
    <link rel="stylesheet" href="./lib/styles1.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
    <script type="text/javascript" src="./lib/Vue3.js"></script>
  </head>
  <body>
    <div id="app">
      <div id="player" style="height: 100%"></div>
      <div class="control">
        <div class="top">
          <div>贴花</div>
        </div>
        <div class="params">
          <div class="button-box">
            <button @click="getLocation()">获取位置</button>
          </div>
          <div class="item">
            <div class="label">
              <div>设置位置x：</div>
            </div>
            <div class="content">
              <input
                type="text"
                v-model="curLocation[0]"
                placeholder="Number"
              />
            </div>
          </div>
          <div class="item">
            <div class="label">
              <div>设置位置y：</div>
            </div>
            <div class="content">
              <input
                type="text"
                v-model="curLocation[1]"
                placeholder="Number"
              />
            </div>
          </div>
          <div class="item">
            <div class="label">
              <div>设置位置z：</div>
            </div>
            <div class="content">
              <input
                type="text"
                v-model="curLocation[2]"
                placeholder="Number"
              />
            </div>
          </div>
          <div class="item">
            <div class="label">
              <div>贴花路径：</div>
            </div>
            <div class="content">
              <input type="text" v-model="picPosition" placeholder="填写路径" />
            </div>
          </div>
          <div class="button-box">
            <button @click="addDecal()">添加贴花</button>
          </div>
          <div class="item">
            <div class="label">
              <div>旋转Pitch</div>
              <div style="color: #b6b6cf">({{ rotation[0] }}°)</div>
            </div>
            <div class="content">
              <div class="range">
                <input
                  type="range"
                  v-model="rotation[0]"
                  :min="-89"
                  :max="90"
                />
                <input
                  type="number"
                  v-model="rotation[0]"
                  :min="-89"
                  :max="89"
                />
              </div>
            </div>
          </div>

          <div class="item">
            <div class="label">
              <div>旋转Yaw</div>
              <div style="color: #b6b6cf">({{ rotation[1] }}°)</div>
            </div>
            <div class="content">
              <div class="range">
                <input
                  type="range"
                  v-model="rotation[1]"
                  :min="-180"
                  :max="180"
                />
                <input
                  type="number"
                  v-model="rotation[1]"
                  :min="-180"
                  :max="180"
                />
              </div>
            </div>
          </div>

          <div class="item">
            <div class="label">
              <div>旋转Roll</div>
              <div style="color: #b6b6cf">({{ rotation[2] }}°)</div>
            </div>
            <div class="content">
              <div class="range">
                <input
                  type="range"
                  v-model="rotation[2]"
                  :min="-180"
                  :max="180"
                />
                <input
                  type="number"
                  v-model="rotation[2]"
                  :min="-180"
                  :max="180"
                />
              </div>
            </div>
          </div>
          <div class="item">
            <div class="label">
              <div>放大X</div>
              <div style="color: #b6b6cf">({{ scale[0] }}倍)</div>
            </div>
            <div class="content">
              <div class="range">
                <input type="range" v-model="scale[0]" :min="1" :max="10" />
                <input type="number" v-model="scale[0]" :min="1" :max="10" />
              </div>
            </div>
          </div>

          <div class="item">
            <div class="label">
              <div>放大Y</div>
              <div style="color: #b6b6cf">({{ scale[1] }}倍)</div>
            </div>
            <div class="content">
              <div class="range">
                <input type="range" v-model="scale[1]" :min="1" :max="10" />
                <input type="number" v-model="scale[1]" :min="1" :max="10" />
              </div>
            </div>
          </div>

          <div class="item">
            <div class="label">
              <div>放大Z</div>
              <div style="color: #b6b6cf">({{ scale[2] }}倍)</div>
            </div>
            <div class="content">
              <div class="range">
                <input type="range" v-model="scale[2]" :min="1" :max="10" />
                <input type="number" v-model="scale[2]" :min="1" :max="10" />
              </div>
            </div>
          </div>
          <div class="button-box">
            <button @click="getDecal()">获取贴花参数</button>
          </div>
          <div class="item">
            <textarea class="content" id="info">{{decalInfo}}</textarea>
          </div>
          <div class="button-box">
            <button @click="getInfo()">复制参数</button>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      // 按需获取
      const { createApp, watch, ref } = Vue

      // 旋转
      let rotation = ref([0, 0, 0])
      // 放大
      let scale = ref([1, 1, 1])
      // 当前位置
      let curLocation = ref([0, 0, 0])
      // 贴花路径
      let picPosition = ref('')
      // 贴花参数信息
      let decalInfo = ref('')

      let flag = false
      /**
       * 获取位置
       */
      const getLocation = async () => {
        alert('可以拾取坐标啦！')
        flag = true
      }
      /**
       * 添加贴花
       */
      const addDecal = async () => {
        fdapi.decal.clear()
        await fdapi.decal.add({
          id: 'd1',
          decalBlendMode: 0, //贴花类型，取值范围：[0,1]；取值说明：0背景混合，1仅贴花（剔除png半透明）；默认值：0
          order: 1, //贴花层级，值越大层级越高，层级最高的显示在最上面一层
          texturePath: picPosition.value, //贴图文件路径

          location: curLocation.value.map(item => Number(item)),

          rotation: rotation.value.map(item => Number(item)),
          scale: scale.value.map(item => Number(item))
        })

        // await fdapi.decal.focus('d1', 5)
      }
      /**
       * 更新贴花属性
       */
      const update = async () => {
        await fdapi.decal.update({
          id: 'd1',
          rotation: rotation.value.map(item => Number(item)),
          scale: scale.value.map(item => Number(item))
        })
      }
      /**
       * 获取贴花参数
       */
      const getDecal = async () => {
        let info = await fdapi.decal.get('d1')
        decalInfo.value = info.data[0]
      }
      /**
       * 复制贴花参数
       */
      const getInfo = () => {
        const input = document.getElementById('info')
        input.select()
        document.execCommand('copy')
      }
      /**
       * 防抖
       * @param func setTimeout回调
       * @param wait setTimeout时间
       * @returns {(function(): void)|*}
       */
      const debounce = (func, wait) => {
        let timeout = null
        return function () {
          clearTimeout(timeout)
          timeout = setTimeout(() => {
            func()
          }, wait)
        }
      }

      watch(rotation, debounce(update, 100), { deep: true })

      // scale监听，开启更新事件
      watch(scale, debounce(update, 100), { deep: true })

      // decalInfo监听，执行获取贴花参数
      watch(decalInfo, getDecal(), { deep: true })
      /**
       * 初始化三维
       * @constructor
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          apiOptions: {
            onReady: function () {},
            onEvent: function (event) {
              const eventType = event.eventtype
              console.log('onEvent', event)
              switch (eventType) {
                case 'LeftMouseButtonClick':
                  console.log(
                    '触发事件类型：鼠标左键单击，eventType：' + eventType
                  )
                  if (flag) {
                    curLocation.value = event.MouseClickPoint
                    flag = false
                  }

                  break
                default:
                  break
              }
            }
          }
        })
      }

      /**
       * 自适应分辨率
       * @returns {Promise<void>}
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }
      // vue挂载
      const app = createApp({
        setup() {
          // 页面加载调用
          window.addEventListener('load', OnLoad, true)
          // 页面窗口变换调用
          window.addEventListener('resize', onResize, true)
          //页面离开事件(离开时清除此页面的操作及重置场景)
          window.onunload = function (e) {
            __g.waterMesh.clear()
            // 重置场景
            fdapi.reset(1 | 2 | 4)
          }
          return {
            addDecal,
            rotation,
            scale,
            getLocation,
            curLocation,
            getDecal,
            decalInfo,
            picPosition,
            getInfo
          }
        }
      })
      app.mount('#app')
    </script>
  </body>
</html>
